import React from "react";
//hoc是个函数,里面返回一个类组件
const hoc = function (Amd) {
  return class Command extends React.Component {
    //公用同样的方法或逻辑
    handleClick = ({ target }) => {
      alert(target.innerText);
    };
    render() {
      return <Amd handleClick={this.handleClick}></Amd>;
    }
  };
};
//若干个纯函数组件--存放ui的
const Btn = ({ handleClick }) => <button onClick={handleClick}>点我</button>;
const A = ({ handleClick }) => <a onClick={handleClick}>哈哈哈</a>;
//mixins 混入 把公共的逻辑和方法抽离出来作为独立的文件,谁用就给谁引入

const App = () => {
    // 调用hoc函数,传入组件,得到一个类组件的实例对象,实例对象就是虚拟dom,用jsx语法渲染出来
    const Button = hoc(Btn)
    const Amd = hoc(A)
  return <div>
      <Button></Button>
      <Amd></Amd>
      HOC高阶组件
      </div>;
};

export default App;
